<template>
    <div class="equipment">
        <el-card>
            <!-- 左上角按钮 -->
            <div class="table-left-top">
                <el-button icon="el-icon-plus" size="mini" type="primary" @click="addPop">新增设备</el-button>
            </div>

            <!-- 表格区域 -->
            <div class="table-body">
                <el-table ref="listData" style="margin-top: 10px" :data="listData" v-loading="loading">
                    <el-table-column prop="relaysHostId" label="设备ID" />
                    <el-table-column prop="bindingNum" label="数量" />
                    <el-table-column prop="address" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" @click="seeTongDao(scope.row)">查看通道</el-button>
                            <el-button size="mini" type="text" @click="addDel(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pages">
                <!-- <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="10"
                    layout="total, prev, pager, next"
                    :total="total">
                </el-pagination> -->
            </div>

            <!-- 编辑或删除页 -->
            <el-dialog
                v-if="dialog"
                :title="mdl.storeId ? '编辑设备' : '新增设备'"
                :visible.sync="dialog"
                width="800px"
            >
                <form-model :mdl="mdl" :handle-close-drawer="handleCloseDialog" @getList="getList" />
            </el-dialog>

            <!-- 通道 -->
            <el-dialog
                v-if="isTongDao"
                title="通道列表"
                :visible.sync="isTongDao"
                width="800px"
            >
                <el-table ref="listData" style="margin-top: 10px" :data="tdList">
                    <el-table-column prop="id" label="id" />
                    <el-table-column prop="channelName" label="通道名称" />
                    <el-table-column prop="roomName" label="绑定房间" />
                    <el-table-column prop="operationDeviceName" label="用途" />
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import FormModel from './FormModel.vue'

import { getRelaysList,delRelays,getChannelListByRelaysId } from "@/api/user";
export default {
    components: { FormModel },
    data(){
        return{
            loading: false,
            condition: {
                current: 1,
                size: 10
            },
            listData: [],
            total: 0,
            mdl: {},
            dialog: false, // 新增、编辑弹框
            isTongDao:false,// 通道列表
            tdList:[]
        }
    },
    created() {
        this.getList()
    },
    methods:{
        // 获取列表
        getList() {
            this.loading = true
            getRelaysList(this.condition).then(res=>{
                console.log(res)
                if(res.statusCode == '00000'){
                    setTimeout(() => {
                        this.listData = res.data
                        this.loading = false
                    }, 300);
                }
            })
        },

        // 新增-弹窗
        addPop() {
            this.dialog = true
            this.mdl = {}
        },

        // 查看通道
        seeTongDao(e){
            console.log(e)
            this.isTongDao = true
            getChannelListByRelaysId({relaysId:e.id}).then(res=>{
                if(res.statusCode == '00000'){
                    this.tdList = res.data
                }
            })
        },

        // 删除
        addDel(e){
            const that = this
            that.$confirm('确定删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delRelays({
                    id: e.id
                }).then(res => {
                    if (res.statusCode === '00000') {
                        that.getList()
                    }
                })
            }).catch(() => {
                        
            });
        },

        // 关闭dialog方法
        handleCloseDialog() {
            this.dialog = false
        }
    }
}
</script>

<style lang="scss" scoped>
.equipment {
  margin: 20px;
}
.pages{
    text-align: right;
    margin-top:20px;
}
</style>